<template>
    <div class="content">
        <el-table class="content-list" border :data="data" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="type.info" label="类别" />
            <el-table-column label="状态" width="100">
                <template #default="scope">
                    <el-tag
                        v-if="scope.row.status.id == 1003"
                        type="danger"
                        disable-transitions
                        >已封禁</el-tag
                    >
                    <el-tag v-else type="success" disable-transitions
                        >正常</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column label="权限操作">
                <template #default="scope">
                    <el-button size="small" @click="handleToRole(scope.row.id)"
                        >分配角色</el-button
                    >
                    <el-button
                        size="small"
                        @click="handleToFunction(scope.row.id)"
                        >分配功能</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        size="small"
                        :disabled="scope.row.status.id == 1003"
                        @click="handleUpdateStatus(scope.row.id, 1003)"
                        >封禁</el-button
                    >
                    <el-button
                        size="small"
                        :disabled="scope.row.status.id == 1002"
                        @click="handleUpdateStatus(scope.row.id, 1002)"
                        >解封</el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, shallowReactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { storeToRefs } from "pinia";
import { useUserStore } from "../../../stores/user";
import { defineProps, defineEmits } from "vue";
import { url, staticUrl } from "@/services";
import { moveElement } from "@/utils/util";
import { updateStatus, deleteUser } from "../../../services/user";

const userStore = useUserStore();
const {fetchUserRole,fetchUserFunction} = userStore;
const { toRoleVisible, toFunctionVisible } = storeToRefs(userStore);

const prefixUrl = ref(staticUrl);

const props = defineProps(["data", "pagination"]);
const emit = defineEmits(["show"]);

async function handleDelete(id) {
    ElMessageBox.confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        await deleteUser(id);
        emit("show");
    });
}
async function handleToRole(id) {
    await fetchUserRole(id);
    toRoleVisible.value = true;
}
async function handleToFunction(id) {
    await fetchUserFunction(id);
    toFunctionVisible.value = true;
}
async function handleUpdateStatus(id, status) {
    await updateStatus(id, status);
    emit("show", props.pagination.pageNum, props.pagination.pageSize);
}

</script>
<style>
.content {
    padding-bottom: 50px;
}
.content-list {
    /* margin-top: 25px; */
    margin-bottom: 15px;
}
</style>
